<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>公告</title>
		<script src="js/global.js"></script>
	</head>

	<body>
		<script type="text/html" id="barDemo">
			<a class="layui-btn " lay-event="add">添加公告</a>
		</script>
		<script type="text/html" id="barDemo2">
			<a class="layui-btn layui-btn-xs" lay-event="edit">查看与编辑</a>
		</script>

		<!--  表格-->
		<table id="demo" lay-filter="test"></table>

		<div id="xiugaic" style="display: none">
			<form class="layui-form" onsubmit="return false" id="xiugaif" lay-filter="xiugaif">
				<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
				<div class="layui-form-item">
					<label class="layui-form-label">公告内容</label>
					<div class="layui-input-block">
						<textarea name="content" class="layui-textarea"></textarea>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"></label>
					<div class="layui-input-inline">
						<button class="layui-btn" lay-submit lay-filter="xiugaibtn"><i class="layui-icon">&#xe605;</i>修改</button>
						<button type="reset" class="layui-btn layui-btn-primary"><i class="layui-icon">&#x1006;</i>重置</button>
					</div>
				</div>
				<!--  修改的表单中，需要放一个 隐藏域，用来储存id-->
				<input type="hidden" name="id" />
			</form>
		</div>

		<div id="tianjiac" style="display: none">
			<form class="layui-form" onsubmit="return false" id="tianjiaf">
				<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
				<div class="layui-form-item">
					<label class="layui-form-label">公告内容</label>
					<div class="layui-input-block">
						<textarea name="content" class="layui-textarea"></textarea>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"></label>
					<div class="layui-input-block">
						<button class="layui-btn" lay-submit lay-filter="tianjia">立即提交</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
				<!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
			</form>
		</div>
		<script type="text/javascript">
			layui.use(['form', 'table', 'layer'], function() {
				var form = layui.form;
				var table = layui.table;
				var layer = layui.layer;
				var $ = layui.$;
				//执行渲染
				table.render({
					elem: '#demo' //指定原始表格元素选择器（推荐id选择器）
						,
					url: globalData.server + 'notice/getNoticeList?token=' + globalData.getToken(),
					toolbar: '#barDemo',
					page: true,
					//limit: 5,
					cols: [
						[{
							checkbox: true
						}, {
							field: 'id',
							title: 'id',
							sort: true,
							width: 100
						}, {
							title: '公告显示',
							width: 120,
							templet: function(d) {
								if(d.isShow=="是") {
									return "<input type='checkbox' value='" + d.id + "' name='status'  lay-filter='lock' lay-skin='switch' lay-text='是|否' checked/>"
								} else { //通过按钮的value获取用户id
									return "<input type='checkbox' value='" + d.id + "' name='status' lay-filter='lock' lay-skin='switch' lay-text='是|否'>"
								}
							}
						}, {
							field: 'content',
							title: '公告内容',
							width: 300
						}, {
							field: 'createTime',
							title: '发布时间',
							width: 180
						}, {
							toolbar: '#barDemo2',
							title: '操作'
						}]
					]
					//设置表头
					//,…… //更多参数参考右侧目录：基本参数选项
				});

				//监听工具条 
				table.on('toolbar(test)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
					var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
					if(layEvent === 'add') { //编辑
						layer.open({
							type: 1,
							area: ['500px', '400px'],
							content: $("#tianjiac")
						})
					}
				});

				//监听工具条 
				table.on('tool(test)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
					var data = obj.data; //获得当前行数据
					var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
					if(layEvent === 'edit') { //编辑
						form.val('xiugaif', data)
						layer.open({
							type: 1,
							area: ['500px', '400px'],
							content: $("#xiugaic")
						})
					}
				});

				//开关监听事件2
				form.on('switch(lock)', function(data) {
					var isshow = null;
					if(data.elem.checked) {
						isshow = "是";
					} else {
						isshow = "否";
					}
					console.log(data.value)
					$.post(globalData.server + "notice/updateNotice?token=" + globalData.getToken(), {
						id: data.value,
						isshow: isshow
					}, function(res) {
						if(res.code == 0) {
							layer.msg(res.msg, {
									icon: 1,
									time:1000
								}, function() {
									layer.closeAll(); //关闭所有的窗口
									//table.reload('demo', {}); //表格重载
									window.location.reload(); //刷新页面
								});
						}
					})
				})

				form.on('submit(tianjia)', function(data) {
					console.log(data.field)
					$.post(globalData.server + "notice/addNotice?token=" + globalData.getToken(), data.field, function(res) {
						layer.msg(res.msg, {
									icon: 1,
									time:1500
								}, function() {
									layer.closeAll(); //关闭所有的窗口
									table.reload('demo', {}); //表格重载
									window.location.reload(); //刷新页面
								});
					}, "json")
				})


			//修改提交的监听
				form.on('submit(xiugaibtn)', function(data) {
					var url = globalData.server+"notice/updateNotice2?token="+globalData.getToken();
					$.post(url, data.field, function(res) {
						if(res.code == 0) {
							layer.msg(res.msg, {
								icon: 6,
								time: 1000
							}, function() {
								layer.closeAll(); //关闭所有的窗口
								table.reload('demo', {}); //表格重载
								window.location.reload(); //刷新页面
							});
						}
					}, "json");

					return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
				});
				//修改提交的监听--end

			});
		</script>
	</body>

</html>